<template>
    <div>
        <el-card>
            <!-- 卡片添加按钮 -->
            <el-button size="default" type="primary" icon="Plus" style="margin-bottom: 10px;"
                v-has="`cuser.detail`">添加品牌</el-button>
            <el-button size="default" type="primary" icon="Plus" style="margin-bottom: 10px;"
                v-has="`cuser.user`">去除弹框</el-button>
            <!-- 表格 -->
            <el-table border :data="data.slice((pageNo - 1) * limit, pageNo * limit)">
                <el-table-column prop="date" label="序号" align="center" />
                <el-table-column prop="name" label="品牌名称" align="center" />
                <el-table-column prop="address" label="品牌LOGO" align="center" />
            </el-table>
            <!--
            分页
            page-sizes用于下拉数据
            -->
            <el-pagination style="margin-top: 20px;" v-model:current-page="pageNo" v-model:page-size="limit"
                :page-sizes="[3, 5, 7, 9]" :background="true" layout=" prev, pager, next, jumper,->,sizes,total,"
                :total="data.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </el-card>
    </div>
</template>
  
<script setup lang="ts">
import userUserStroe from '../../../store/modules/user'

import { ref, reactive, onBeforeMount } from 'vue';
//当前页码
let pageNo = ref<number>(1);
//  每页展示多少条数据
let limit = ref<number>(3);
let data = reactive<any>([])

const handleSizeChange = () => { }
const handleCurrentChange = () => { }

onBeforeMount(() => {
    let arr = []
    for (let i = 0; i < 100; i++) {
        arr.push({
            date: i + 1,
            name: `${i}牛肉`,
            address: "地址"
        })
    }
    data = arr
    console.log("sdsdfl",userUserStroe.buttons)
})


</script>
  
<style lang="scss" scoped></style>